<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				padding: 10px;
				border: 10px solid yellow;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
			/*修改内联样式*/	
				var btn01=document.getElementById("btn01");
				var box1=document.getElementById("box1");
				btn01.onclick=function(){
					box1.style.width="300px";
					box1.style.height="300px";
					box1.style.backgroundColor="aquamarine";
				}
				
				
			/*获取当前显示的样式（内联外联都可以）*/
				var btn02=document.getElementById("btn02");
				var box1=document.getElementById("box1");
				btn02.onclick=function(){
					if(window.getComputedStyle){
						alert(getComputedStyle(box1,null).backgroundColor);/*大部分浏览器支持，IE8及以下不支持*/
					}else{
						alert(box1.currentStyle.backgroundColor);/*IE浏览器专用*/
					}
					
				}
				
				
			/*	其他样式相关属性*/
				var btn03=document.getElementById("btn03");
				var box1=document.getElementById("box1");
				btn03.onclick=function(){
					console.log("可见宽度:"+box1.clientWidth);/*可见宽度可见高度*/
					console.log("可见高度:"+box1.clientHeight);	
					console.log("元素宽度:"+box1.offsetWidth);/*元素宽度高度*/
					console.log("元素高度:"+box1.offsetHeight);
					console.log("定位父元素"+box1.offsetParent);/*返回定位父元素*/
					console.log("水平偏移量"+box1.offsetLeft);/*相对定位父元素的水平偏移量*/
					console.log("垂直偏移量"+box1.offsetTop);/*垂直偏移量*/
				}
			}
		</script>
	</head>
	<body>
		<button id="btn01">修改元素样式</button>
		<button id="btn02">获取当前样式（颜色）</button>
		<button id="btn03">获取样式</button>
		<br />
		<div style="position: absolute;">
			<span>
				<div id="box1"></div>
			</span>
		</div>
		
	</body>
</html>
